import Plugin from '../plugin'
import {CN,EN,Icon} from '../../config'
import {UI} from '../../config/app-config'
import cssText from './index.jcss'

export default class Notebook extends Plugin{
	constructor($event){
		super()

		this.name = "Notebook"
		this.$event = $event;
		this.theme = [{
				bg:"#fefaee99",
				f:UI.fcolor1
			},{
				bg:"#e6dbd9",
				f:"#614950"
			},{
				bg:"#fef7ef",
				f:"#805054"
			},{
				bg:"#fefaee",
				f:UI.fcolor1
			},{
				bg:"#c8d7ec",
				f:"#3d5883"
			},{
				bg:"#f1ecf5",
				f:"#5c416d"
			},{
				bg:"#fffbb9",
				f:"#77592c"
			},{
				bg:"#feecaa",
				f:UI.fcolor1
			},{
				bg:"#f6f6f6",
				f:"#6f478a"
			}
		]
		this.createClassName({
			notebook:"notebook",
			noteWrap:"note-wrap",
			noteOpen:"note-open-btn",
			noteClose:"note-close-btn",
			themeBtn:"note-theme-btn",
			nav:"note-nav"
		})
		
		this.injectStyle(cssText,this.cn)
		this.createLayer([this.cn.notebook,CN.transition,CN.slideRight].join(" "))
		this.render()
		this.bind()
	}//༒
	render(){
		let cn = this.cn
		this.$layer.innerHTML = 
		`
		<button title="打开记事本" data-action="noteOpen" class="${cn.noteOpen} ${CN.abtn} ${CN.iconfont} ${Icon.notebook}"></button>
		<div class="${cn.nav}">
			<button title="主题色切换" data-action="themeToggle" class="${cn.themeBtn} ${CN.abtn}">&#9775;</button>
		</div>
		<header class="${CN.header}">
		<button data-action="noteClose" class="${cn.noteClose} ${CN.abtn} ${CN.iconfont} ${Icon.arrayright}"></button>
		</header>
		<div class="${cn.noteWrap}">
			<textarea spellcheck="false">我爱你中国 I love you, China !</textarea>
		</div>`
		this.input = this.$layer.query("textarea")
		this.$event.emit(EN.layout_render,this.$layer)
	}
	bind(){
		this.$layer.addEventListener("click",(e)=>{
			let action = e.target.dataset.action
			this[action]&&this[action]()
		})
	}
	themeToggle(){
		let len = Math.floor(Math.random()*this.theme.length)
		let theme = this.theme[len]
		console.log(theme)
		this.$layer.style.backgroundColor=theme.bg
		this.input.style.color=theme.f
		this.input.parentNode.style.borderLeftColor=theme.f+"77"
	}
	noteOpen(){
		this.$layer.classList.remove(CN.slideRight);
	}
	noteClose(){
		this.$layer.classList.add(CN.slideRight);	
	}
}